<template>
  <div class="box bg-box">
    <t-button shape="square" variant="outline" @click="orderStore.get" style="float: right">
      <template #icon>
        <t-icon name="refresh" />
      </template>
    </t-button>
    <t-form layout="inline" style="margin-bottom: 20px">
      <t-form-item label-width="0">
        <t-select v-model="orderStore.where.key" style="width: 200px; margin-right: 10px">
          <t-option value="code" :label="plugin.t('order.code')" />
        </t-select>
        <t-input v-model="orderStore.where.value">
          <template #prefix-icon>
            <t-icon name="search" />
          </template>
        </t-input>
      </t-form-item>
      <t-form-item label-width="0">
        <t-button theme="default" @click="orderStore.reset(1)">{{ $t('common.search') }}</t-button>
      </t-form-item>
    </t-form>
    <Table @upload="onUpload" />
  </div>
</template>
<script setup>
  import app from '@/app'
  import index from '../../index'
  import orderStore from '../../store/order'
  import ticketStore from '../../store/ticket'
  import Table from './table.vue'

  const plugin = index.plugin

  const onUpload = data => {
    app.loading()
    ticketStore.create(data.order_id).then(res => {
      orderStore.get()
      app.message('success', plugin.message('ticket.message.' + res.message))
    }).catch(res => {
      app.message('warning', plugin.message('ticket.message.' + res.message))
    }).finally(() => app.loading(false))
  }
</script>